  <template>
    <div class="login-container d-flex ai-center jc-center">

      <div class="login d-grid ">
        <div class="aside text-white text-center p-5">
          <h2>[智慧校友服务平台]</h2>
          <span> 构建一体式校友服务平台</span>

        </div>
        <div class="from p-5">
          <h1 class="mb-3">登陆入口</h1>
          <el-form ref="formRef" label-position="top" @keyup.enter="headleLogin">
            <el-form-item label="账号" prop="username">
              <el-input v-model="loginform.username" size="large" placeholder="请输入用户名" clearable :prefix-icon="User" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="loginform.password" size="large" placeholder="请输入密码" clearable show-password
                :prefix-icon="Lock" />
            </el-form-item>

            <el-form-item label="">
              <div class="d-flex jc-between w-100">
                <el-checkbox>记住我</el-checkbox>
                <el-link href="" class="float-right">忘记密码</el-link>
              </div>

            </el-form-item>

            <el-form-item>
              <el-button class="w-100" type="primary" size="large" @click="headleLogin">登录</el-button>
            </el-form-item>

            <el-form-item>
              还没有账号？<el-link href="" class="float-right">立即注册</el-link>
            </el-form-item>


          </el-form>
        </div>

      </div>
    </div>

  </template>

<script lang="ts" setup>

import { Lock, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { login } from '@/api/user'
// import type { Result } from '@/util/interface';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

const router = useRouter();
// const route = useRoute();

const loginform = reactive({
  username: '',
  password: ''
});


//用户点击登录
const headleLogin = async () => {
  if (loginform.username == '') {
    ElMessage.warning('请输入用户名');
    return false
  }
  if (loginform.password == '') {
    ElMessage.warning('请输入密码');
    return false;
  }
  //调用api验证密码账号是否正确
  const res: any = await login(loginform.username, loginform.password);
  if (res.data.code === 0) {
    console.log("登陆后的结果", res);
    const result = res.data.data;
    //处理登陆后的数据
    //1.保存登陆后的token 到 sessionStorage（临时存储）  localStorage（持久存储）
    sessionStorage.setItem('token', res.data.data.token);
    // 2.保存用户信息到sessionStorage（临时存储）  localStorage（持久存储）
    // 2.保存登陆后的用户信息到Pinia（）
    userStore.userInfo.avatar = result.userInfo.avatar;
    userStore.userInfo.username = result.userInfo.username;
    userStore.userInfo.role = result.userInfo.role;
    // Object.assign(userStore.userInfo, result.userInfo);
    // 3.跳转到首页

    switch (result.userInfo.role) {
      case "0":
        router.push('/admin');
        break;
      case "1":
        router.push('/alumni');
        break;
      case '2':
        router.push('/student');
        break;

    }
  } else {
    ElMessage.error(res.data.msg);

  }
};

</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  // 确保路径正确并且图片存在
  background: linear-gradient(rgba(255, 165, 0, .95), rgba(0, 66, 255, .95)),
    url("/img/login-01.jpg"),
    center center no-repeat;
  background-size: cover;

}

.login {
  width: 50rem;
  height: 37.5rem;
  border-radius: .5rem;
  background-color: rgba(255, 255, 255, .85);
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 0 10px #fff;
  // border: 1 solid rgba(255,255,255,.25);

  .aside {
    background-image: url("/img/login-aside01.jpg");
    background: url("/img/login-aside01.jpg"),
      conter conter no-repeat;
    background-size: cover;
    border-radius: .5rem 0 0 .5rem;
  }
}
</style>
